<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="wangyiyunmusic.css">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <!-- 红色导航条
    <div class="lead">
       <div class="content">
            <ul class="nav">
                <li>
                    <a><em>推荐</em></a>
                </li>
                <li><em>排行榜</em></li>
                <li><em>歌单</em></li>
                <li><em>主播电台</em></li>
                <li><em>歌手</em></li>
                <li><em>新碟上架</em></li>
            </ul> -->
       <!-- </div>
    </div> -->

    <!-- 歌单 -->
    <div class="music">
        <div id="page1" class="page-content">
            <div class="musiccontent">
                <div class="search-bar">
                    <span>全部</span>
                    <select name="category" id="category">
                    <option value="all">选择分类</option>
                    <!-- 这里可以添加更多分类选项 -->
                    </select>
                    <button type="submit">热门</button>
                </div>
                <div class="list-box">
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                    <div class="list">
                        <img src="" class="img">
                        <!-- <div class="in"></div> -->
                        <div class="rebottom">
                            <div class="ear"></div>
                            <div class="bofangliang"></div>
                            <div class="bofangbiao"></div>
                        </div>
                        <div class="word shenglue"></div>
                        <div class="by">by</div>
                        <div class="name shenglue"></div>
                    </div>
                </div>        
            </div>
        </div>
    </div>

    <!-- 分页导航 -->
   <ul class="pagination">
        <li class="page-item prev">
            <a href="#" onclick="showPage(1)">&lt;上一页</a>
        </li>
        <li class="page-item">
            <a href="#" onclick="showPage(1)">1</a>
        </li>
        <li class="page-item">
            <a href="#" onclick="showPage(2)">2</a>
        </li>
        <li class="page-item next">
            <a href="#" onclick="showPage(2)">下一页&gt;</a>
        </li>
    </ul>

    <!-- 首页底部播放栏 -->
    <div class="playBar">
        <div class="wrap">
            <!-- 播放按钮 -->
            <div class="playBtns">
                <a href="javascript:;" title="上一首" class="up">上一首</a>
                <a href="javascript:;" title="播放暂停" class="play">播放暂停</a>
                <a href="javascript:;" title="下一首" class="next">下一首</a>
            </div>
            <!-- 歌曲图片 -->
            <div class="songHead"></div>
            <!-- 进度条、播放时间 -->
            <div class="progress">
                <!-- 进度条的背景 -->
                <div class="bg"></div>

                <!-- 当前播放进度条 -->
                 <div class="use" style="width: 34%;">
                    <span class="yuandian"></span>
                 </div>

                 <!-- 播放时间 -->
                <div class="playTime">
                    01:23/03:15
                </div>

            </div>
            <!-- 收藏和分享 -->
            <div class="scfx">
                <a href="javascript:;" title="画中画" class="inphoto">画中画</a>
                <a href="javascript:;" title="收藏" class="add">收藏</a>
                <a href="javascript:;" title="分享" class="share">分享</a>
            </div>
            <!-- 音量 循环 播放列表 -->
             <div class="control">
                <a href="javascript:;" class="volume"></a>
                <!-- 音量调整容器 -->
                <div class="volumeWrap" style="display: none;">
                    <!-- 半透明的背景色 -->
                     <div class="beijing"></div>
                </div>
                <!-- 循环方式 -->
                <a href="javascript:;" class="way"></a>
                    <div class="tip" style="display: none;">循环</div>
            
                <a href="javascript:;" class="bflist"></a>
             </div>
             <!-- 音质 -->
              <div class="yinzhi"></div>
              <!-- 锁定 -->
               <div class="lockBtn">
                <a href="javascript:;" class="btn"></a>
               </div>
        </div>
    </div>
    <script src="scripts.js"></script>
</body>
</html>
